<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        /* 子代选择器 */
        .box>li {
            border: 1px red solid;
            list-style: none;

        }
        /* +当前元素的后面第一个兄弟 */
        /* .child+li{
            background: red;
        } */


        /* ~当前元素的后面所有兄弟 */

        /* 空格是后代选择器 */
        /* 逗号 多个选择器 */
        .child~li{
            background: red;
        }
        
        .container~p{
            background: rebeccapurple;
        }

    </style>



</head>

<body>
    <ul class="box">

        <li>1111111111
            <ul>
                <li>aaaaaaa</li>
                <li>bbbbbb</li>
                <li>cccccccccc</li>
            </ul>

        </li>


        <li class="child">2222222222</li>
        <li>333333333</li>
        <li>4444444</li>
        <li>5555555</li>

    </ul>

    <div class="container"> div-1111111111</div>
    <p>p-111</p>
    <p>222</p>

    <div>
        <p>3333</p>
    </div>

</body>

</html>